在設計網頁時,很難一次就到完美或完全符合需求(神人例外),所以先求有再求好,網頁會動了再將程式碼變得好看一些,這就是今天要做的事!
從這個專案的模板可以發現有很多重複的地方,為了實現 DRY 原則,可以將重複處匯集成另一個檔案,再傳到個檔案中。到 core/templates/core 創建base.html
,並將重複的 HTML 貼到其中:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}{% endblock %}</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.15/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-900 text-white min-h-screen flex items-center justify-center">
{% block content %}
{% endblock %}
</div>
</body>
</html>
上面程式碼中,{% block content %}
與{% endblock %}
是用來放入 HTML 的區域,也就是每個 template 相異之處。{% block title %}``{% endblock %}
之間則是放入不同的標題,這些模板標籤在所有延伸自此的模板都會使用。接著到每個模板中進行修改,這邊以index.html
為例:
{% extends 'core/base.html' %}
{% block title %}
Login or Sign Up
{% endblock %}
{% block content %}
<div class="bg-gray-800 p-8 rounded shadow-md w-full max-w-sm">
<h1 class="text-2xl font-semibold mb-4">Login or Sign Up</h1>
<form method="post" class="space-y-4">
{% csrf_token %}
<div>
<label for="email" class="block text-gray-300">Email:</label>
<input type="email" id="email" name="email" required
class="w-full px-4 py-2 border rounded-md bg-gray-700 text-white focus:outline-none focus:border-blue-500">
</div>
<div>
<label for="username" class="block text-gray-300">Username:</label>
<input type="text" id="username" name="username" required
class="w-full px-4 py-2 border rounded-md bg-gray-700 text-white focus:outline-none focus:border-blue-500">
</div>
<div>
<label for="password" class="block text-gray-300">Password:</label>
<input type="password" id="password" name="password" required
class="w-full px-4 py-2 border rounded-md bg-gray-700 text-white focus:outline-none focus:border-blue-500">
</div>
<button type="submit"
class="w-full bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600">
Sign Up
</button>
<p class="text-gray-300 text-center">Or</p>
<button type="submit" formaction="{% url 'core:login' %}"
class="w-full bg-gray-600 text-white py-2 px-4 rounded-md hover:bg-gray-700">
Log In
</button>
</form>
</div>
{% endblock %}
第一行的{% extends 'core/base.html' %}
需要base.html
的路徑,取代了重複的程式碼,讓檔案看起來更簡潔。
有些網頁需要登入後才能進行操作,因此需要在 view 上增加一些限制,而 Django 中有現成裝飾器可以用來限制存取。進入 core/views.py 導入裝飾器並加在 view 上:
# 其他導入
from django.contrib.auth.decorators import login_required
# 其他程式碼
# 加入裝飾器
@login_required
def profile(request, pk):
# 其他程式碼
# 加入裝飾器
@login_required
def update(request, pk):
# 其他程式碼
這樣使用者就必須先登入才能使用這兩個 view 的邏輯。
優化的部分先到這邊告一段落,一定還有可以優化的地方(如 UI 優化、用forms.py
建立表格...等等),只是擔心時間不夠,所以先進行到下一個部分-- Django REST framework。大家下次見~